<!DOCTYPE html>
<html class="flexcc">
<head>
	<title>Change The LED State</title>
	<link rel="stylesheet" href="../static/css/index.css" type="text/css">
	<style>
		html {
			width: 100%;
			height: 100%;
		}

		body {
			width: 100%;
			height: 100%;
		}

		.flexcc {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		a {
			display: block;
			width: 300px;
			height: 300px;
			background: darkgray;
			text-decoration: none;
			color: red;
		}

		.tipsWrold {
			margin-bottom: 250px;
		}
		
		.tipWrold h1{
			font-size:100px;
		}
		
		.buttonBox {
			font-size: 45px;
		}

		.buttonBox a:nth-child(1) {
			background: green;
			color: #fff;
			margin-right: 50px;
			border-radius: 200px;
		}

		.buttonBox a:nth-child(2) {
			background: red;
			color: #fff;
			margin-left: 50px;
			border-radius: 200px;
		}
	</style>
</head>

<body class="flexcc">
	<div class="place flexcc">
		<div class="box">
			<div class="tipsWrold">
				<h1 id="detail" class="flexcc">Welcome To The Night_LED Controller</h1>
				<h1 class="flexcc">The LED State Is: <span id="worring"> OFF </span></h1>
			</div>
			<div class="buttonBox flexcc">
				<a onclick="LedControl('./on')" class="flexcc"><span>ON</span></a>
				<a onclick="LedControl('./off')" class="flexcc"><span>OFF</span></a>
			</div>
		</div>
	</div>
</body>
<script>
	window.onload = function () {
		xmlhttp = new XMLHttpRequest();
		if (xmlhttp == null) {
			alert('你的浏览器不支持XMLHttp');
			Tips("The browser is not has XMLHttp")
			return;
		}
		//
		let request = new XMLHttpRequest();
		request.onload = function () {
			if (request.status === 200) {
				let res = request.responseText;
				//console.log(res,"and",request.status,typeof(res))
				//Tips(request.responseText)
				if(res==="0"){
					Worrs("OFF");
				}else if(res==="1"){
					Worrs("ON")
				}
			}
		}
		//
		request.open("GET","./state");
		request.send(null);
	}

	function LedControl(url) {
		// alert(url);
		xmlhttp = new XMLHttpRequest();
		if (xmlhttp == null) {
			alert('你的浏览器不支持XMLHttp');
			Tips("The browser is not has XMLHttp")
			return;
		}
		if(url==="./on"){
			Worrs("ON");
		}else if(url==="./off"){
			Worrs("OFF");
		};
		let request = new XMLHttpRequest();
		request.onload = function () {
			if (request.status === 200) {
				Tips(request.responseText)
			}
		}
		request.open("GET",url);
		request.send(null);
	}

	function Tips(content) {
		let detail = document.getElementById("content");
		detail.innerTEXT = content;
	}
	function Worrs(content) {
		let detail = document.getElementById("worring");
		detail.innerText = content;
	}
</script>

</html>
